import React, { useState, createRef } from 'react'
import { BrowserRouter, Switch, Route, NavLink } from "react-router-dom";
import "./App.css";
import OuterClickExample from './views/OuterClickExample'
import LazyComponent from './views/LazyComponent'
// const LazyComponent = React.lazy(() => import('./views/LazyComponent'))
// console.log(LazyComponent, 'LazyComponent')
import Context from './views/Context'
import LocaleSample from './views/ContextLocale'
import ProfilePageFunction from './views/ProfilePageFunction'
import ProfilePageClass from './views/ProfilePageClass'
import SetState from './views/SetState'
import FancyButton from './views/Ref'
import AutoFocusTextInput from './views/AutoFocusTextInput'
import WrappedFancyButton from './views/FancyButton'
import ParentRef from './views/AutoFocusInput'
import Jsx from './views/JSX'
import WordAdder from './views/ListOfWords'
import Portal from './views/Modal'
import DataProvider from './views/RenderProps'
import MouseTracker from './views/MouseTracker'
import Card from './views/Card'
import Event from './views/Event'
import CloneElement from './views/CloneElement'
import SnapShotSample from './views/SnapShotSample'
import Hello from './views/HOC/Hello'
import Counter from './views/Count'

// 全局 Context API
import { ThemeContext, themes } from './theme-context'

function App() {
  const [state, changeState] = useState(themes.light)
  const [selected, changeSelected] = useState('b')
  const handleChange = (event: any) => {
    changeSelected(event.target.value)
  }
  const ref: any = createRef()
  const newRef: any = createRef()
  const focusRef: any = createRef()

  const handleFocus = () => {
    console.log(newRef, 999)
    // newRef.current['myRef'].current.click()
  }
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <nav id="nav">
            <ul>
              <li>
                <NavLink activeClassName="active" exact to="/">Home</NavLink>
              </li>
              <li>
                <NavLink to="/click">OuterClickExample</NavLink>
              </li>
              <li>
                <NavLink to="/context">Context</NavLink>
              </li>
              <li>
                <NavLink to="/lazy">Lazy</NavLink>
              </li>
              <li>
                <NavLink to="/profile-page">ProfilePage</NavLink>
              </li>
              <li>
                <NavLink to="/setstate">setState</NavLink>
              </li>
              <li>
                <NavLink to="/ref">ref</NavLink>
              </li>
              <li>
                <NavLink to="/jsx">JSX</NavLink>
              </li>
              <li>
                <NavLink to="/wordadd">Immutability</NavLink>
              </li>
              <li>
                <NavLink to="/portal">Portals</NavLink>
              </li>
              <li>
                <NavLink to="/render-props">Render Props</NavLink>
              </li>
              <li>
                <NavLink to="/clone-element">cloneElement</NavLink>
              </li>
              <li>
                <NavLink to="/snapshot">SnapshotSample</NavLink>
              </li>
              <li>
                <NavLink to="/hoc">HOC</NavLink>
              </li>
            </ul>
          </nav>

          {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
          <div id="main">
            <Switch>
              <Route path="/" exact>
                <Home />
                {/* <Card title="card title" paragraph="this is paragraph" /> */}
                {/* <Event children={() => (<><b>bold</b><strong>strong</strong></>)} /> */}
              </Route>
              <Route path="/setstate">
                <SetState />
              </Route>
              <Route path="/lazy">
                {/*<Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
          </Suspense>*/}
                <LazyComponent />
              </Route>
              <Route path="/click">
                <OuterClickExample />
              </Route>
              <Route path="/context">
                <ThemeContext.Provider value={state}>
                  <Context changeThemes={() => state === themes.light ? changeState(themes.dark) : changeState(themes.light)} />
                  <LocaleSample />
                </ThemeContext.Provider>
              </Route>
              <Route path="/profile-page" exact>
                Choose Profile to
              <select onChange={handleChange} value={selected}>
                  <option value="a">A</option>
                  <option value="b">B</option>
                </select><br />
                <ProfilePageFunction user={selected} />
                <ProfilePageClass user={selected} />
              </Route>
              <Route path="/ref">
                <FancyButton ref={ref} types="button">click</FancyButton>
                <WrappedFancyButton ref={newRef} label="标签" type='button' onClick={() => { console.log('onclick') }} />
                <button onClick={handleFocus}>focus</button>
                <AutoFocusTextInput />
                <ParentRef />
              </Route>
              <Route path="/jsx" >
                <Jsx />
                <Counter />
              </Route>
              <Route path="/wordadd">
                <WordAdder test="test prop" />
              </Route>
              <Route path="/portal" >
                <Portal name="loading" />
                <Portal name="loading" />
              </Route>
              <Route path="/render-props">
                <DataProvider render={() => (<h1>hello</h1>)} />
                <MouseTracker />
              </Route>
              <Route path="/clone-element">
                <CloneElement />
              </Route>
              <Route path="/snapshot">
                <SnapShotSample />
              </Route>
              <Route path="/hoc">
                <Hello />
              </Route>
            </Switch>
          </div>
        </div>
      </BrowserRouter>
    </div>
  )
}

function Home() {
  return (
    <div className="App">
      <div className="container">
        <h1>我是标题</h1>
        <p>第一段话</p>
        <p>第二段话</p>
      </div>
    </div>
  )
}
// class Home extends React.Component {
//   render() {
//     return [
//       <li key="A">First item</li>,
//       <li key="B">Second item</li>,
//       <li key="C">Third item</li>,
//     ];
//   }
// }

export default App;
